<style scoped lang="sass">
    .el-upload-list{
        float:left;
    }
    .upload-box{
    }
    .iconfont{
        font-size:25px;
        cursor:pointer;
        text-decoration:none;
        color:#666;
    }
</style>
<template>
    <div class="clearfix">
        <div class="">
            <el-input v-model="data" class="w-300" disabled></el-input>
            <a :href="data | sourceUrl" target="_blank" class="iconfont">&#xe624;</a>
        </div>
        <div
            v-if="!readonly" 
            class="upload-box mt20">
            <el-upload :action="action" :on-success="handleSuccess" :data="datas" name="myfiles"  ref="upload">
                <el-button  type="primary">点击上传</el-button>
                <span class="ml20">
                    <i class="el-icon-info inline-block vm pink"></i>
                    <span>整段音频上传要求：格式：MP3 500M以内</span>
                </span>
            </el-upload>
        </div>
    </div>
</template>

<script>

    export default {
        props: {
            readonly:{
                type:Boolean,
                required:false,
            },
            action:{
                type:String,
                default:'',
            },
            bookId:{
                type:String,
                default:'',
            },
            data: {
                type: String,
                default:'',
            },
        },
        computed: {
            datas(){
                return {
                    bookId:this.bookId
                }
            }
        },
        watch: {

        },
        data() {
            return {
            }
        },
        methods: {
            handleSuccess(res,file){
                this.$emit('update:data',res.data);
                setTimeout(()=>{
                    this.$refs.upload.clearFiles();
                },2000)
            },
        }
    }
</script>